<template>
  <div id="noVip">
    <el-dialog
      ref="isVipDialog"
      v-model="dialogVisible"
      title=""
      width="30%"
      :before-close="cancel"
      center
    >
      <div class="dialog-content">
        <WarningFilled class="icon-WarningFilled" />
        <span>开通VIP即可体验</span>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="handleClose(true)">
            开通vip
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
const store = useStore();
const router = useRouter();
const isVipDialog = ref(null);
const dialogVisible = ref(false);
const cancel = () => {
  dialogVisible.value = false;
};
// 点击确定
const handleClose = () => {
  // 跳转到开通会员页面，应该是会员商品的详情
  router.push({
    path: '/shopserve/shopDet',
    query: {
      id: store.getters.indexInfo.vipserviceid,
    },
  });
};
const handleIsShowDialog = () => {
  dialogVisible.value = true;
};
defineExpose({
  handleIsShowDialog,
});
</script>

<style lang="scss" scoped>
.dialog-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .icon-WarningFilled {
    width: 10em;
    height: 10em;
    color: var(--color-text);
  }

  span {
    display: inline-block;
    height: 2em;
    line-height: 4em;
    font-size: 1.5em;
    color: var(--color-text);
    margin: 30px 0;
  }
}
</style>
